<template>
    <div>
      <Header title="电影资讯"></Header>
      <el-container>
        <el-tabs v-model="activeName" stretch>
          <el-tab-pane label="正在热映" name="1">
            <MovieList :movie-list="nowMovieList" :is-login="isLogin"></MovieList>
          </el-tab-pane>
          <el-tab-pane label="即将上映" name="2">
            <MovieList :movie-list="ComingList" :is-login="isLogin"></MovieList>
          </el-tab-pane>
        </el-tabs>
      </el-container>
<Footer></Footer>
    </div>
</template>

<script>
    import Header from "../../components/Header";
    import Footer from "../../components/Footer";
    import {mapState} from "vuex";
    import MovieList from "./movieList";
    export default {
        name: "index",
      components: {MovieList, Footer, Header},
      data(){
          return{
            activeName:'1'
          }
      },
      computed:{...mapState({
          isLogin:state=>state.user.isLogin,
          nowMovieList: state=>state.movie.nowplaying,
          ComingList: state=>state.movie.coming
      })},
      beforeCreate() {
        this.$store.dispatch('movie/movNow')
          this.$store.dispatch('movie/movComing')
      }
    }
</script>

<style scoped>

</style>
